<template>
	<view class="group">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的拼团</block>
		</cu-custom>			
		<cu-tabs :list="tabs" act="1" @change="params.type = $event.act"></cu-tabs>
		<view class="desc">
			<view v-for="(item, index) in type" :key="index">
				<view>{{ item.name }}</view>
				<block v-if="!index || index === 1">
					<picker mode="date" @change="selectStart" v-if="index === 0">
						<view class="picker">{{ params.collges_start_time }}</view>
					</picker>
					<picker mode="date" @change="selectEnd" v-else>
						<view class="picker">{{ params.collges_end_time }}</view>
					</picker>
				</block>
				<block v-else>
					<view @tap="selectType" class="picker">{{ item.value }}</view>
				</block>
			</view>
		</view>
		<view class="main">
			<scroll-view scroll-y>
			<view class="list" v-if="list.length">
				<view class="item"></view>
			</view>
			<empty-data v-else>什么也没有~</empty-data>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getGroup } from '@/common/api/lbt'
	export default {
		name: 'Group',
		data () {
			const currentDate = this.getDate({
				format: true
			})				
			return {
				list: [],
				item: ['全部', '成团', '进行', '失败', '中奖'],
				tabs: [
					{ name: '我的参团', act: 0 },
					{ name: '我的拼团', act: 1 }
				],
				type: [
					{ name: '开始时间', value: currentDate },
					{ name: '结束时间', value: currentDate },
					{ name: '类型', value: '全部' }
				],				
				params: {
					pagea: 1,
					type: 0, //0参团，1开团
					status: 0,
					collges_start_time: currentDate,
					collges_end_time: currentDate
			    },
				text: 1
			}
		},
		onLoad () {
			this.getList()
		},
		watch: {
			params: {
				handler (val, oldval) {
					this.$nextTick(() => {
						this.getList()
					})
				},
				deep: true
			}
		},
		methods: {
			getList () {
				getGroup(this.params).then(res => {
					if (!res.code) {
						this.list = res.data
					}
				})
			},
			change () {},
			selectStart (e) {
				this.params.collges_start_time = e.detail.value
			
			},
			selectEnd (e) {
				this.params.collges_end_time = e.detail.value
			},
			selectType () {
				uni.showActionSheet({
					itemList: this.item,
					success: res => {
						this.params.status = res.tapIndex
						this.type[2].value = this.item[res.tapIndex]
					}
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				return `${year}-${month}-${day}`;
			}			
		}
	}
</script>

<style lang="less">
@import '../common/styles/variables.less';
.fixedBody;
.group {
	display: flex;
	flex-direction: column;
	flex-flow: column;
	height: 100%;
	overflow: hidden;
		.desc {
			display: flex;
			align-items: center;
			padding: 15upx 0;
			background-color: white;
			.border-bottom;
			box-shadow: 0 15upx 34upx #dedede;
			z-index: 99;
			& > view {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				flex-flow: column;
				text-align: center;
				position: relative;
				padding: 10upx 0;
				.arrowRight(#999 ,0, 10upx);
				& > view {
					font-size:@minSize;
				}
				.picker {
					font-size: @minSize;
					font-weight: bold;
					color:@red					
				}				
				&:not(:last-of-type) {
					&::after {
						position: absolute;
						content: '';
						top: 0;
						right: 0;
						border-right: 1px dashed #eaeaea;
						height: 100%;
					}						
				}				
			}
		}
	.main {
		flex: 1;
		overflow: hidden;
		position: relative;
		scroll-view {
			height: 100%;
			.list {
				background-color: white;
				.item {
					height: @height;
					display: flex;
					align-items: center;
					padding: 0 15upx;
					&:not(:last-of-type) {
						.border-bottom;
					}
				}
			}
		}
	}
}
</style>
